image {
  will-change: transform;
}

page,
uni-page-body {
  background-color: #fcfcfc;
}

.fixed {
  position: fixed !important;
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.wrap {
  white-space: normal !important;
}

.nowrap {
  white-space: nowrap !important;
}

.text-shadow {
  text-shadow: 1rpx 2rpx rgba(0, 0, 0, 0.33);
}

.anim-delay {
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}

.footbox {
  left: 0;
  right: 0;
  bottom: 80rpx;
  position: fixed;
}

.full {
  width: 100% !important;
  height: 100% !important;

  &-w,
  &-width {
    width: 100% !important;
  }

  &-h,
  &-height {
    height: 100% !important;
  }
}

// 通用 Flex 样式
.flex {
  display: flex;

  @for $i from 1 through 6 {
    &-#{$i} {
      flex: $i;
    }
  }

  &-x {
    height: 100%;
    display: flex;
    flex-direction: row;

    &-center {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &-between {
      display: flex;
      justify-content: space-between;
    }
    &-normal {
      justify-content: flex-start;
    }
  }

  &-y {
    width: 100%;
    display: flex;
    flex-direction: column;

    &-center {
      display: flex;
      justify-content: center;
    }
  }

  &-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  &-nowrap {
    display: flex;
    flex-wrap: nowrap;
  }

  &-center {
    display: flex;
    align-items: center !important;
    align-content: center !important;
    justify-content: center !important;
  }

  &-align-center {
    display: flex;
    align-items: center !important;
  }

  &-justify-center {
    display: flex;
    justify-items: center !important;
  }
}

// 常用卡片样式
.ta-card {
  padding: 15rpx;
  position: relative;
  background: white;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow:
    0 10rpx 20rpx -2rpx rgba(0, 0, 0, 0.1),
    0 0 10rpx -4rpx rgba(0, 0, 0, 0.1);
  &-head {
    display: flex;
    padding: 20rpx 15rpx;
    position: relative;
    font-size: 28rpx;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
      bottom: 0;
    }
  }
  &-body {
    padding: 20rpx 15rpx;
    font-size: 26rpx;
    line-height: 1.8em;
  }
  &-foot {
    padding: 30rpx 15rpx;
    position: relative;
    font-size: 26rpx;
    &::before {
      top: 0;
    }
  }

  & &-foot:last-child {
    padding-bottom: 15rpx;
  }

  &-head + &-foot::before {
    display: none;
  }

  &-head::after,
  &-foot::before {
    left: 0;
    right: 0;
    height: 1px;
    content: "";
    display: block;
    position: absolute;
    transform: scaleY(0.6);
    background-color: rgba(0, 0, 0, 0.1);
  }
}

// 常用基础样式
.ta-main {
  &-bg {
    background-color: $uv-main-color;
  }
  &-text {
    color: $uv-main-color;
  }
}

.ta-desc {
  &-bg {
    background-color: $uv-content-color;
  }
  &-text {
    color: $uv-content-color;
  }
}

.ta-water {
  &-text {
    color: rgba(0, 0, 0, 0.2);
    font-size: 22rpx;
    transform: scale(0.8);
  }
}

.ta-light {
  &-bg {
    background-color: #fff;
  }
  &-text {
    color: #fff;
  }
}

.ta-p-0 {
  padding: 0 !important;
}

.ta-pt-0 {
  padding-top: 0 !important;
}
